<nav class="navbar py-8 border-b border-neutral-300 shadow flex"
     id="navbar"
     th:with="navbarConfig=${theme.config.navbar}"
     th:classappend="
     'bg-opacity-' + ${navbarConfig.active_opacity}
     + ' bg-' + ${navbarConfig.active_color}
     + ' text-' + ${navbarConfig.active_color} + '-content'
     + ' backdrop-' + ${navbarConfig.backdrop_blur}"
     th:attr="newClass='bg-opacity-' + ${navbarConfig.bg_opacity}
     + ' bg-' + ${navbarConfig.color}
     + ' text-' + ${navbarConfig.color} + '-content'
     + ' backdrop-' + ${navbarConfig.backdrop_blur}">
    <div class="flex flex-row justify-between items-center w-full">
        <div class="flex flex-row justify-start items-center">
            <th:block th:if="${theme.config.drawer.drawer_Show}">
                <div class="flex">
                    <th:block th:replace="~{component/widget/nav_drawer}"/>
                </div>
            </th:block>
            <div id="navbar_title" class="relative flex flex-row flex-nowrap" th:style="'left: ' + ${navbarConfig.title_position} + '%;'">
                <div class="flex flex-row justify-start items-center">
                    <a class="btn btn-ghost"
                       th:classappend=" ${theme.config.navbar.title_size}"
                       th:text="${site.title ?: theme.spec.displayName}"
                       th:href="@{/}"></a>
                </div>
            </div>
            <div id="navbar_menu" class="relative flex flex-row flex-nowrap" th:style="'left: ' + ${navbarConfig.menu_position} + '%;'">
                <th:block th:if="${navbarConfig.menu_Show}">
                    <th:block th:replace="~{component/widget/nav_menu}"/>
                </th:block>
            </div>
        </div>
        <div class="flex flex-row justify-end items-center">
            <th:block th:replace="~{component/widget/nav_toggle}"/>
        </div>
    </div>
</nav>

<style>
    @media (max-width: 767px) {
        /* 去掉 id 为 cover_content 的 absolute 和 left-0 样式 */
        #navbar_title {
            position: absolute !important; /* 改为绝对定位 */
            left: 50% !important; /* 水平居中 */
            top: 50% !important; /* 垂直居中 */
            transform: translate(-50%, -50%) !important; /* 向左和向上移动各自的50% */
            width: auto; /* 根据需要设置宽度 */
            text-align: center !important; /* 文本居中 */
        }
    }
</style>